/**
 * @Author: Bobby
 * @Date: 2022-02-15 13:14:17
 * @LastEditTime: 2022-03-22 09:41:41
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\mixin\uiMixin.js
 * @CIMC-V2
 */
import { eventTask } from '@ve/eventTask/index'
import { isEmpty } from 'lodash'
// import isEmpty from 'lodash/isEmpty'
//主要使用在预览页面 elements Ui

export default {
  props: {
    info: {
      required: true,
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  inject: {
    hasPreview: { default: false },
    development: { default: false },
    previewPageId: { default: '' },
    nowLayerId: { default: '' },
  },
  data() {
    return {
      _modelInfo: null,
      dataSource: {
        type: 0,
        id: '',
        dataKey: '',
        getDataKey: '',
        flag: true,
      },
    }
  },
  computed: {
    isMobile() {
      return process.env.VUE_APP_BuildProjectType === 'mobile' || this.$store.state.diy.settings.mode == 'mobile'
    },
    getHasPreview() {
      return this.$store.getters['preview/getHasPreview']
    },
    //是否配置数据源
    hasDataSource() {
      return this.dataSource.id == '' ? false : true
    },
    //根据sourceId找到模块
    getDataSource() {
      // let _modelInfo = this.$store.getters['preview/getDeepModelOrLayerInfo'](this.dataSource)
      if (this.isMobile) return false
      let _modelInfo = this._modelInfo
      if (!_modelInfo) {
        return {}
      }
      // 如果没有 getDataKey 则返回全量数据
      if (_modelInfo.type === 1 || _modelInfo.type === 2) {
        // 如果为页面组件 则返回 requestData
        return _modelInfo.data && _modelInfo.data.requestData
      } else {
        // 其他组件则返回 formData
        return _modelInfo.data && _modelInfo.data.formData
      }
    },
    getInfo() {
      // console.log('info', this.info)
      return this.info
    },
    //
  },
  watch: {
    getDataSource: {
      deep: true, //暂时开启 后面优化getDataSource
      // immediate: true,
      handler: function (newval) {
        if (newval != undefined && this.hasDataSource && this.getHasPreview && this.hasPreview) {
          // console.log('bbfpl watch', newval)
          // 如果数据源绑定的是自己的话 则不进行任何操作 防止页面进入死循环
          if (this.dataSource.id === this.info._id) return
          this.dataSourceChange && this.dataSourceChange(newval)
        }
      },
    },
  },
  mounted() {
    // console.log('组件实例化！！！！！！')
    if (!this.isMobile) {
      this.initDataSourceBind()
      this._modelInfo = this.$store.getters['preview/getDeepModelOrLayerInfo'](this.dataSource)
    }
    setTimeout(() => {
      this.onLoad()
    }, 1)
    if (this.nowLayerId) {
      this.$nextTick(() => {
        setTimeout(() => {
          // console.log('哇哈哈哈-2')
          if (this.previewPageId() && this.info._id) {
            this.$store.dispatch('tmp/setPages', {
              pageId: this.previewPageId(),
              uiId: this.info._id,
              uiInfo: this.info,
            })

            this.$pub(`onListener_layer_${this.nowLayerId()}`, {
              uiId: this.info._id,
              layerId: this.nowLayerId(),
            })
          }
        }, 5)
      })
    }
  },
  methods: {
    // 批次自动往下光标停留
    cursorHover() {
      // 若不是批次属性则不往下走
      if (isEmpty(this.info._PId)) return
      // _module 拿到批次组件
      let _module = this.vuiComponents[this.info._PId]
      // current 获得当前批次组件
      let current = {}
      if (isEmpty(_module.self.focusIdArr)) return
      _module.self.focusIdArr.forEach((v, i) => {
        if (v._id === this.info._id) {
          current = {
            ...v,
            i: i,
          }
        }
      })
      const arrSelect = ['uiPdaTimePicker', 'uiPdaSelect']
      const arrInput = ['uiPdaInput', 'uiPdaDateTimeInput']

      // 找到下一个需要光标停留的组件
      // 获得批次属性第当前的下一个需要光标停留的组件实列
      if (current.i < _module.self.focusIdArr.length - 1) {
        const next_module = this.vuiComponents[_module.self.focusIdArr[current.i + 1]._id]
        // 光标聚焦时候下拉和时间组件弹起来
        if (arrSelect.indexOf(next_module.self.getInfo.type) != -1) {
          next_module.self.showPicker = true
        }
        // 光标聚焦时候输入框聚焦
        if (arrInput.indexOf(next_module.self.getInfo.type) != -1) {
          next_module && next_module.ref && next_module.ref.blur() //组件失去焦点
          setTimeout(() => {
            next_module && next_module.ref && next_module.ref.focus() //组件聚焦
          }, 2)
        }
      }
    },

    //进入事件任务 单个模块
    runEventTask(type, additionalData, callbackFunction) {
      if (type && this.info && this.info.interaction && this.info.interaction.length > 0) {
        //如果为单击 点击一次则禁用
        if (type == 'onClick' && this.flag == true) {
          setTimeout(() => {
            this.flag = false
          }, 2000)
          eventTask(this, type, this.info, additionalData, callbackFunction)
        }
        eventTask(this, type, this.info, additionalData, callbackFunction)
      } else {
        callbackFunction && callbackFunction(this)
      }
    },
    onHandClick() {
      if (!this.getHasPreview) {
        return
      }
      this.runEventTask('onHandClick')
    },
    //加载
    onLoad() {
      console.log('触发载入时')
      if (!this.getHasPreview) {
        return
      }
      this.runEventTask('onLoad')
    },
    initDataSourceBind() {
      if (!this.getHasPreview) {
        return
      }
      let _dataSourceBind = this.info.dataSourceBind
      let dataSourceObj = {}
      if (_dataSourceBind && _dataSourceBind.sourceId) {
        dataSourceObj.id = _dataSourceBind.sourceId.value.source[0]
        dataSourceObj.type = _dataSourceBind.sourceId.value.type
        dataSourceObj.dataKey = _dataSourceBind.dataKey?.value
        dataSourceObj.getDataKey = _dataSourceBind.getDataKey?.value
        // 改为一次性改变this值，防止多次改变多次触发计算属性
        this.dataSource = dataSourceObj
      }
    },
    //单击
    onClick() {
      // console.log(this.info)
      if (!this.getHasPreview) {
        // console.log('预览模式不运行 onClick')
        return
      }
      this.$store.dispatch('tmp/setButtonId', this.info._id)
      this.runEventTask('onClick')
    },
    // // 回车事件
    // enter() {
    //   if (!this.getHasPreview) {
    //     console.log('预览模式不运行 enter')
    //     return
    //   }
    //   this.runEventTask('enter')
    // },
    // // 下拉选中确认
    // checked() {
    //   if (!this.getHasPreview) {
    //     console.log('预览模式不运行 enter')
    //     return
    //   }
    //   this.runEventTask('checked')
    // },
    //修改
    onChange() {
      if (!this.getHasPreview) {
        console.log('预览模式不运行 onChange')
        return
      }
      this.runEventTask('onChange')
    },
    //双击
    onDbClick() {
      if (!this.getHasPreview) {
        console.log('预览模式不运行 onDbClick')
        return
      }
      this.runEventTask('onDbClick')
    },
    // 隐藏组件
    $hidenModule() {
      if (this.conditionProperty) {
        this.conditionProperty.hidden = true
      }
      if (this.info.extension && this.info.extension.hidden) {
        this.info.extension.hidden.value = true
      }
    },
    // 显示组件
    $showModule() {
      if (this.conditionProperty) {
        this.conditionProperty.hidden = false
      }
      if (this.info.extension && this.info.extension.hidden) {
        this.info.extension.hidden.value = false
      }
    },
    // 禁用组件
    $disabledModule() {
      if (this.conditionProperty) {
        this.conditionProperty.disabled = true
      }
      if (this.info.extension && this.info.extension.disabled) {
        this.info.extension.disabled.value = true
      }
      if (this.info.type === 'uiDynamicFormLot' || this.info.type === 'uiDynamicForm') {
        // 如果是动态表单组件 则调用动态表单的方法
        this.$isDisabled && this.$isDisabled(true)
      }
    },
    // 启用组件
    $enableModule() {
      if (this.conditionProperty) {
        this.conditionProperty.disabled = false
      }
      if (this.info.extension && this.info.extension.disabled) {
        this.info.extension.disabled.value = false
      }
      if (this.info.type === 'uiDynamicFormLot' || this.info.type === 'uiDynamicForm') {
        // 如果是动态表单组件 则调用动态表单的方法
        this.$isDisabled && this.$isDisabled(false)
      }
      if (this.info.type === 'uiCodemirror') {
        this.$change()
      }
    },
    // 请求组件数据
    $requestData(cb) {
      if (this.info.type.indexOf('uiSelect') > -1 || this.info.type === 'uiCascader' || this.info.type === 'uiList' || this.info.type === 'uiCheckbox') {
        //
        this.requestOptionList && this.requestOptionList(cb)
      } else if (this.info.type === 'uiPackDetails') {
        this.packRequest(cb)
      } else if (String(this.info.type).indexOf('uiDynamicForm') !== -1) {
        this.requestOptionList(cb)
        // this.dynamicFormLotRequestApi()
      } else if (this.info.type === 'uiTree' || this.info.type === 'uiTransfer') {
        this.requestData(cb)
      } else if (this.info.type === 'uiInput') {
        this.requestExpendData(cb)
      }
    },
    //回车事件
    onEnterKeyUp(callbackFunction) {
      if (!this.getHasPreview) {
        console.log('预览模式不运行 onEnterKeyUp')
        return
      }
      this.runEventTask('onEnterKeyUp', null, callbackFunction)
    },
  },
  beforeUnmount() {
    // this.$unsub(`SplitpaneResized`)
    // console.log('测试高度 销毁高度')
  },
}
